<template>
  <view class="login">
    <image class="bg" src="/static/images/login-bg.jpg" mode="widthFix"></image>
    <view class="body">
      <u--form
        labelPosition="left"
        :model="loginInfo"
        :rules="rules"
        ref="form1"
      >
        <u-form-item prop="code" borderBottom ref="item1">
          <view slot="label"
            ><text class="iconfont icon-sbm font24"></text><text>识别码：</text>
          </view>
          <u--input
            v-model="loginInfo.code"
            border="none"
            placeholder="单位识别码"
          ></u--input>
        </u-form-item>
        <u-form-item prop="username" borderBottom ref="item2">
          <view slot="label"
            ><text class="iconfont icon-dlmm font24"></text
            ><text>登录账户：</text>
          </view>
          <u--input
            v-model="loginInfo.username"
            border="none"
            placeholder="登录名"
          ></u--input>
        </u-form-item>
        <u-form-item prop="password" borderBottom ref="item3">
          <view slot="label"
            ><text class="iconfont icon-dlzh font24"></text
            ><text>登录密码：</text>
          </view>
          <u--input
            v-model="loginInfo.password"
            type="password"
            border="none"
            placeholder="密码"
          ></u--input>
        </u-form-item>
      </u--form>
    </view>
    <view class="submit">
      <u-button size="mini" type="primary" text="确定" @click="login">
      </u-button>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { login } from '@/service/login.js'
// import cookies from 'weapp-cookie'

export default {
  data() {
    return {
      loginInfo: {
        code: '',
        username: 'dev',
        password: 'dev',
        grant_type: 'password',
        captchaId: '',
        code: '',
      },
      rules: {
        username: {
          type: 'string',
          required: true,
          message: '请填写用户名',
          trigger: ['blur', 'change'],
        },
        password: {
          type: 'string',
          required: true,
          message: '请填写密码',
          trigger: ['blur', 'change'],
        },
      },
    }
  },
  created() {},
  methods: {
    // 登錄
    login() {
      this.$refs.form1.validate().then(async res => {
        const { code, data, msg } = await login(this.loginInfo)
        console.log({
          code,
          data,
          msg,
        })
        if (code === 0 && data) {
          const token = `${data.type} ${data.token}`
          uni.setStorageSync('token', token)
					// cookies.set('newly_token', token,  { domain: 'newly_token' })
          uni.navigateTo({
            url: '/pages/identity/identity',
          })
        } else {
          this.showToast(msg)
        }
      })
    },
    // 顯示toast
    showToast(msg) {
      this.$refs.uToast.show({
        type: 'error',
        message: msg,
        position: 'top',
      })
    },
  },
}
</script>

<style lang="scss">
.login {
  width: 100%;
  font-size: 14px;

  image {
    width: 100%;
  }

  .body {
    padding: 0 76rpx;
  }

  .submit {
    width: 392rpx;
    margin: 72rpx auto;

    .u-button {
      height: 26px;

      .u-button__text {
        font-size: 14px !important;
      }
    }
  }
}

.iconfont {
  vertical-align: middle;
}

.font24 {
  font-size: 24px;
}
</style>
